<style>
    .img-zoom-wp {
        width: 450px;
        height: 530px;
        margin: 20px 0 0 20px;
        position: relative;
    }
    
    .img-zoom-wp .big-img-wp {
        height: 450px;
        border: 1px solid #ccc;
        position: relative;
    }
    
    .big-img-wp img {
        width: 100%;
    }
    
    .small-img-wp {
        position: relative;
    }
    
    .small-img-wp .small-img-inner {
        width: 350px;
        overflow: hidden;
        margin: 15px 50px 0 50px;
    }
    
    .small-img-wp ul {
        width: 500px;
        height: 50px;
    }
    
    .small-img-wp li {
        width: 46px;
        height: 46px;
        float: left;
        border: 2px solid transparent;
    }
    
    .small-img-wp li.active {
        border: 2px solid red;
    }
    
    .small-img-wp li img {
        width: 100%;
        height: 100%;
    }
    
    .small-img-wp a {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #000;
        opacity: 0.5;
    }
    
    .small-img-wp a.prev {
        left: 0;
        top: 0;
    }
    
    .small-img-wp a.next {
        right: 0;
        top: 0;
    }
    
    .img-masker {
        width: 200px;
        height: 200px;
        background-color: yellow;
        opacity: 0.5;
        border: 1px solid #ccc;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        /* visibility: hidden; */
    }
    
    .img-zoomer {
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
        position: absolute;
        top: -1px;
        left: 449px;
        display: none;
        background-image: url('/img/zoom/m11.jpg');
        background-repeat: no-repeat
    }
    
    .big-img-wp img.tmp-big-img {
        width: auto;
        height: auto;
        display: none;
    }
</style>

<div class="img-zoom-wp">
    <div class="big-img-wp">
        <img class="big-img" src="/img/zoom/m1.jpg">
        <img class="tmp-big-img" src="/img/zoom/m11.jpg">
        <div class="img-masker"></div>
    </div>
    <div class="img-zoomer"></div>
    <div class="small-img-wp">
        <a class="prev" href="javascript:;"></a>
        <div class="small-img-inner">
            <ul>
                <li class="active"><img src="/img/zoom/m1.jpg" bsrc="/img/zoom/m11.jpg" alt=""></li>
                <li><img src="/img/zoom/m2.jpg" bsrc="/img/zoom/m22.jpg" alt=""></li>
                <li><img src="/img/zoom/m3.jpg" bsrc="/img/zoom/m33.jpg" alt=""></li>
                <li><img src="/img/zoom/m1.jpg" bsrc="/img/zoom/m11.jpg" alt=""></li>
                <li><img src="/img/zoom/m2.jpg" bsrc="/img/zoom/m22.jpg" alt=""></li>
                <li><img src="/img/zoom/m3.jpg" bsrc="/img/zoom/m33.jpg" alt=""></li>
                <li><img src="/img/zoom/m1.jpg" bsrc="/img/zoom/m11.jpg" alt=""></li>
                <li><img src="/img/zoom/m2.jpg" bsrc="/img/zoom/m22.jpg" alt=""></li>
                <li><img src="/img/zoom/m3.jpg" bsrc="/img/zoom/m33.jpg" alt=""></li>
                <li><img src="/img/zoom/m1.jpg" bsrc="/img/zoom/m22.jpg" alt=""></li>
            </ul>
        </div>
        <a class="next" href="javascript:;"></a>
    </div>
</div>

<script>
    function init() {
        getUlWidth()
        initEvent()
    }

    function getUlWidth() {
        let len = $('.small-img-inner>ul>li').length
        let width = $('.small-img-inner>ul>li').outerWidth()
        let totalWidth = len * width
        $('.small-img-inner>ul').width(totalWidth)
    }

    function initEvent() {
        $('.big-img-wp').on('mouseenter', onBigImgMouseover)
        $('.big-img-wp').on('mousemove', onBigImgMousemove)
        $('.big-img-wp').on('mouseleave', onBigImgMouseout)
        $('.small-img-wp').on('click', 'a', onArrowClick)
        $('.small-img-wp').on('mouseover', 'li', onSmallIconMouseover)
    }
    // 简单
    let onBigImgMouseover = function() {
            $('.img-masker').add($('.img-zoomer')).show()
        }
        //业务最重
    let onBigImgMousemove = function(e) {
            let pageX = e.pageX
            let pageY = e.pageY
            let left = pageX - $('.big-img-wp').offset().left - $('.img-masker').width() / 2
            let top = pageY - $('.big-img-wp').offset().top - $('.img-masker').height() / 2
            let maxWidth = $('.big-img-wp').width() - $('.img-masker').width()
            let maxHeight = $('.big-img-wp').height() - $('.img-masker').height()
            let scale = $('.tmp-big-img').width() / $('.big-img').width()


            let scaleLeft = (pageX - $('.big-img-wp').offset().left) * scale - 250
            let scaleTop = (pageY - $('.big-img-wp').offset().top) * scale - 250

            $('.img-zoomer').css({
                'backgroundPosition': `${-scaleLeft}px ${-scaleTop}px`
            })

            if (left <= 0) {
                left = 0
            } else
            if (left >= maxWidth) {
                left = maxWidth;
            }

            if (top <= 0) {
                top = 0;
            } else if (top >= maxHeight) {
                top = maxHeight;
            }
            $('.img-masker').css({
                left: left,
                top: top
            })
        }
        // 简单
    let onBigImgMouseout = function() {
            $('.img-masker').add($('.img-zoomer')).hide()
        }
        // 下面导航左右按钮
    let onArrowClick = function() {
        let currentScreenWidth = $('.small-img-inner').width()
        let marginLeftWidth = $(this).hasClass('next') ? -($('.small-img-inner>ul').width() - currentScreenWidth) : 0
        $('.small-img-inner>ul').animate({
            'marginLeft': marginLeftWidth
        }, 300)
    }
    let onSmallIconMouseover = function() {
        let $this = $(this)
        $this.addClass('active').siblings('.active').removeClass('active')
        $('.big-img').attr('src', $this.find('img').attr('src'))
        $('.img-zoomer').css('backgroundImage', `url(${ $this.find('img').attr('bsrc')})`)
    }

    init() // 模块的入口
</script>